<template>
  <div class="login-container">
    <div class="img-wrapper">
      <img class="logo" :src="require('../assets/image/logo.png')" width="60" height="60"/>
      <div class="sys-name">{{sysName}}2.0</div>
      <div class="sys-remark">
        基于SpringBoot+Vue构建的数据可视化低代码开发平台
      </div>
    </div>
    <div class="main-wrapper">
      <div v-show="loginFormVisible" class="login-wrapper">
        <div class="top-wrap">
          请登录...
          <div class="bottom-border"></div>
        </div>
        <div class="form-wrap">
          <Form ref="loginForm" label-position="top" :model="loginFormData" :rules="loginRuleValidate" @keyup.enter.native="submitLoginForm()">
            <FormItem label="账号" prop="username">
              <Input type="text" size="large" v-model="loginFormData.username" placeholder="请输入账号"/>
            </FormItem>
            <FormItem label="密码" prop="password">
              <Input type="password" size="large" v-model="loginFormData.password" placeholder="请输入密码"/>
            </FormItem>
            <FormItem class="form-footer">
              <a class="sub-btn" @click="submitLoginForm">登录</a>
              <p class="reg-btn">没有账号？<a @click="toggleFormVisible">立即注册</a></p>
            </FormItem>
          </Form>
        </div>
      </div>

      <div v-show="registerFormVisible" class="login-wrapper">
        <div class="top-wrap">
          注册账号
          <div class="bottom-border"></div>
        </div>
        <div class="form-wrap">
          <Form ref="registerUserForm" :label-width="105" :model="registerFormData" :rules="registerRuleValidate" @keyup.enter.native="submitRegisterForm()">
            <FormItem label="账号" prop="username">
              <Input size="large" v-model="registerFormData.username"/>
            </FormItem>
            <FormItem label="密码" prop="password">
              <Input size="large" v-model="registerFormData.password" type="password"/>
            </FormItem>
            <FormItem label="确认密码" prop="password2">
              <Input size="large" v-model="registerFormData.password2" type="password"/>
            </FormItem>
            <FormItem label="邮箱" prop="email">
              <Input size="large" v-model="registerFormData.email"/>
            </FormItem>
            <FormItem label="QQ" prop="qq">
              <Input size="large" v-model="registerFormData.qq"/>
            </FormItem>
            <FormItem label="职业" prop="profession">
              <Input size="large" v-model="registerFormData.profession"/>
            </FormItem>
            <FormItem>
              <Button type="primary" long class="m-r-5px" size="large" @click="submitRegisterForm" :loading="registerUserLoading">提交</Button>
              <p class="reg-btn"><a @click="toggleFormVisible">返回登录</a></p>
            </FormItem>
          </Form>
        </div>
      </div>

      <div class="footer">
        Copyright © 2021-2022 {{sysName}}
      </div>
    </div>

  </div>
</template>

<script>

  export default {
    name: 'Login',
    data() {
      return {
        sysName: window.g.SYS_NAME,

        loginFormVisible: true,
        registerFormVisible: false,

        registerUserLoading: false,

        loginFormData: {
          username:'',
          password:''
        },

        loginRuleValidate: {
          username: [
            { required: true, message: '账号不能为空', trigger: 'blur' },
            { min: 3, max: 16, message: '账号长度3-16个字符', trigger: 'blur' }
          ],
          password: [
            { required: true, message: '密码不能为空', trigger: 'blur' },
            { type: 'string', min: 3, max: 16, message: '密码长度3-16个字符', trigger: 'blur' }
          ]
        },

        registerFormData: {
          username: '',
          password: '',
          password2: '',
          email: '',
          qq: '',
          profession: ''
        },
        registerRuleValidate: {
          username: [
            { required: true, message: '账号不能为空', trigger: 'blur' },
            { min: 3, max: 16, message: '账号长度3-16个字符', trigger: 'blur' }
          ],
          password: [
            { required: true, message: '密码不能为空', trigger: 'blur' },
            { type: 'string', min: 3, max: 16, message: '密码长度3-16个字符', trigger: 'blur' }
          ],
          password2: [
            { required: true, message: '确认密码不能为空', trigger: 'blur' },
            { type: 'string', min: 3, max: 16, message: '密码长度3-16个字符', trigger: 'blur' }
          ]
        }

      }
    },
    mounted() {

    },
    methods: {
      submitLoginForm () {
        this.$refs['loginForm'].validate((valid) => {
          if (valid) {
            this.$PnApi.AuthApi.login(this.loginFormData).then(result => {
              if (result.data.success) {
                localStorage.setItem('current_user', JSON.stringify(result.data.payload));
                this.$router.push('/');
              }else {
                this.$Message.error(result.data.message)
              }
            })
          }
        })
      },
      submitRegisterForm () {
        this.registerUserLoading = true
        this.$refs['registerUserForm'].validate((valid) => {
          if (valid) {
            this.$PnApi.UserApi.registerNewUser(this.registerFormData).then(result => {
              if (result.data.success) {
                this.toggleFormVisible()
                this.$Message.success(result.data.message);
                this.$refs['registerUserForm'].resetFields();
              }else {
                this.$Message.error(result.data.message)
              }
              this.registerUserLoading = false
            })
          }else {
            this.registerUserLoading = false
          }
        })
      },
      toggleFormVisible () {
        this.registerFormVisible = !this.registerFormVisible
        this.loginFormVisible = !this.loginFormVisible
      }
    },
    computed: {}
  }
</script>

<style scoped>
  .form-wrap >>> .ivu-form-item-label {
    color: #515a6e;
    font-size: 14px;
  }
  .form-wrap >>> .ivu-form-item-label:before {
    content: none;
  }
  .form-wrap >>> .ivu-input {
    border: 2px solid #dcdee2;
    background-color: #fff;
    color: #515a6e;
  }
</style>

<style lang="less" scoped>
  .login-container {
    width: 100%;
    height: 100%;
    .img-wrapper {
      height: 100%;
      width: 55%;
      background-image: url(../assets/image/login-bg.jpg);
      background-size: cover;
      float: left;
      position: relative;
      .logo {
        position: absolute;
        left: 50px;
        top: 50px;
      }
      .sys-name {
        position: absolute;
        left: 50px;
        top: 130px;
        color: #fff;
        font-size: 60px;
        font-weight: bold;
        -webkit-animation: slide-in-left 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
        animation: slide-in-left 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
      }
      .sys-remark {
        position: absolute;
        left: 50px;
        top: 220px;
        color: #fff;
        font-size: 26px;
        -webkit-animation: slide-in-left 0.8s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
        animation: slide-in-left 0.8s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
      }
    }
    .main-wrapper {
      width: 45%;
      height: 100%;
      float: right;
      position: relative;
      background: linear-gradient(0deg,#424242,#9e9e9e);
      .login-wrapper {
        width: 380px;
        background-color: #fff;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        border-radius: 10px;
        box-shadow: 2px 1px 20px #424242;
        -webkit-animation: slide-in-top 0.7s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
        animation: slide-in-top 0.7s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
        .top-wrap {
          width: 100%;
          height: 80px;
          background: linear-gradient(90deg,#2196f3,#64b5f6);
          border-top-left-radius: 8px;
          border-top-right-radius: 8px;
          padding-left: 30px;
          font-size: 25px;
          line-height: 80px;
          position: relative;
          .bottom-border {
            width: 100%;
            height: 5px;
            position: absolute;
            bottom: 0px;
            left: 0px;
            background: linear-gradient(90deg,#ff5722,#ff9800);
          }
        }
        .form-wrap {
          padding: 30px;
          .sub-btn {
            display: inline-block;
            margin-right: 5px;
            width: 100%;
            height: 40px;
            border-radius: 4px;
            color: #fff;
            font-size: 14px;
            line-height: 40px;
            text-align: center;
            background-color: #2196f3;
            &:hover {
              background-color: #64b5f6;
            }
          }
          .reg-btn {
            display: block;
            font-size: 14px;
            color: #757575;
            &:hover {
              color: #616161;
            }
          }
        }
      }
      .footer {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        bottom: 25px;
        font-size: 13px;
        color: #fff;
      }
    }
  }

  @-webkit-keyframes slide-in-top {
    0% {
      -webkit-transform: translate(-50%, -1000px);
      transform: translate(-50%, -1000px);
      opacity: 0;
    }
    100% {
      -webkit-transform: translate(-50%, -50%);
      transform: translate(-50%, -50%);
      opacity: 1;
    }
  }
  @keyframes slide-in-top {
    0% {
      -webkit-transform: translate(-50%, -1000px);
      transform: translate(-50%, -1000px);
      opacity: 0;
    }
    100% {
      -webkit-transform: translate(-50%, -50%);
      transform: translate(-50%, -50%);
      opacity: 1;
    }
  }
  @-webkit-keyframes slide-in-left {
    0% {
      -webkit-transform: translateX(-1000px);
      transform: translateX(-1000px);
      opacity: 0;
    }
    100% {
      -webkit-transform: translateX(0);
      transform: translateX(0);
      opacity: 1;
    }
  }
  @keyframes slide-in-left {
    0% {
      -webkit-transform: translateX(-1000px);
      transform: translateX(-1000px);
      opacity: 0;
    }
    100% {
      -webkit-transform: translateX(0);
      transform: translateX(0);
      opacity: 1;
    }
  }
</style>
